<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners"
               @open="onOpen" @close="onClose"
               :title="isEdit ? (isSelf ? '公告-编辑' : '编辑公告') : '添加公告'" :visible.sync="showDialog"
               :close-on-click-modal="false">
      <el-row :gutter="0">
        <el-form ref="NoticeForm" :model="formData" :rules="rules" size="small" label-width="98px">
            <el-form-item label="公告标题" prop="noticeTip">
              <el-input v-model="formData.noticeTip" placeholder="请输入公告标题" :maxlength="8" show-word-limit
                        clearable prefix-icon='el-icon-edit' :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="公告正文描述信息" prop="noticeMessage">
              <el-input size="mini" type="textarea" v-model="formData.noticeMessage"></el-input>
            </el-form-item>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="onClose" type="danger" icon="el-icon-close" size="small">取 消</el-button>
        <el-button @click="handelConfirm" type="success" icon="el-icon-upload2" size="small" :disabled="isSubmit">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { addNotice, getNoticeById, editNotice } from '@/api/notice'

  export default {
    name: 'AddOrUpdate',
    data () {
      // 数据
      return {
        formData: {
          noticeTip: '',
          noticeMessage: ''
        },
        rules: {
          noticeTip: [{
            required: true,
            message: '请输入公告标题',
            trigger: 'blur'
          }],
          noticeMessage: [{
            required: true,
            message: '请输入公告正文',
            trigger: 'blur'
          }]
        },
        showDialog: false,
        isSubmit: false,
      }
    },
    props: {
      addOrUpdateVisible: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: 0
      },
      isEdit: {
        type: Boolean,
        default: false
      },
      isSelf: {
        type: Boolean,
        default: false
      }
    },
    computed: {},
    watch: {
      // 监听 addOrUpdateVisible 改变
      addOrUpdateVisible () {
        this.showDialog = this.addOrUpdateVisible
      }
    },
    methods: {
      onOpen () {
        if (this.isEdit) {
          // 根据Id查找公告信息
          const _this = this
          getNoticeById(this.id).then(response => {
            // 获取到用户信息，填充至各个字段的值当中去
            _this.formData = response.data
          })
        } else {
          // 不是编辑框，将 form 表单信息清除
          this.resetFormData()
        }
      },
      onClose () {
        // 清除 rule 数据
        this.$refs.NoticeForm.clearValidate()
        this.$emit('changeShow', 'false')
      },
      handelConfirm () {
        this.$refs.NoticeForm.validate(valid => {
          // 验证不通过
          if (!valid) return
          const _this = this
          _this.isSubmit = true
          // 判断是新增还是修改
          if (!_this.isEdit) {
            addNotice(_this.formData).then(response => {
              _this.RightMessage(_this, '添加成功', response.message, 'success')
              _this.$emit('update:visible', false)
              // 关闭展示框
              _this.$emit('changeShow', 'false')
              _this.$emit('dataUpdate')
            }).finally(() => {
              _this.isSubmit = false
            })
          } else {
            editNotice(_this.formData, _this.id).then(response => {
              // 如果是当前登录用户，需要更新 sessionStorage 的数据
              if (_this.isSelf) {
                window.sessionStorage.setItem('account', JSON.stringify(_this.formData))
                _this.RightMessage(_this, '修改成功', response.message + '，请刷新页面！', 'success')
              } else {
                _this.RightMessage(_this, '修改成功', response.message, 'success')
              }
              _this.$emit('update:visible', false)
              _this.$emit('changeShow', 'false')
              _this.$emit('dataUpdate')
            }).finally(() => {
              _this.isSubmit = false
            })
          }
        })
      },
      resetFormData () {
        this.formData.noticeTip = undefined
        this.formData.noticeMessage = undefined
      }
    }
  }
</script>
<style>
</style>
